<template>
    <div class="order-list-time" ref="rootEl">
        <!-- 表头 -->
        <div class="table-header">
            <span v-for="h in columns" :key="h.key" :style="{ width: h.width }" class="table-header__cell">
                {{ h.title }}
            </span>
        </div>
        <!-- 虚拟列表主体 -->
        <div class="table-body" ref="tBodyRef" @scroll="onBodyScroll">
            <div class="virtual-spacer" :style="{ height: totalHeight + 'px' }" />
            <div v-for="item in visibleList" :key="item.id" class="order-item" :style="{ transform: `translateY(${item.offsetY}px)` }">
                <template v-for="h in columns" :key="h.key">
                    <span :style="{ width: h.width }" class="order-item__cell">
                        <slot :name="h.key" :row="item as any">{{ (item as any)[h.key] }}</slot>
                    </span>
                </template>
            </div>
            <div ref="anchorEl" class="anchor" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, computed, defineSlots, Ref } from "vue";
import { useScrollList } from "@/hooks/useScrollList";

interface OrderItem {
    id: string;
    name: string;
    impactScore: string;
    time: string;
}

interface Props {
    columns?: { key: string; title: string; width: string }[];
    itemHeight?: number;
    fetchPage: (page: number, size: number) => Promise<OrderItem[]> | OrderItem[];
    realtimeInterval?: number;
    realtimeFactory?: () => OrderItem;
}

const props = withDefaults(defineProps<Props>(), {
    columns: () => [],
    itemHeight: 32,
    realtimeInterval: 4000,
});

const rootEl = ref<HTMLElement>();
const anchorEl = ref<HTMLElement>();
const tBodyRef = ref();

/* ---------- 自适应行高 ---------- */
const internalItemHeight = ref(props.itemHeight);

const adjustRowHeight = () => {
    nextTick(() => {
        if (!rootEl.value) return;
        const header = rootEl.value.querySelector(".table-header") as HTMLElement;
        const body = rootEl.value.querySelector(".table-body") as HTMLElement;
        if (!header || !body) return;
        const headerH = header.offsetHeight;
        const bodyH = body.clientHeight;
        const rows = Math.floor(bodyH / props.itemHeight) || 1;
        const lineHeight = bodyH / rows;
        internalItemHeight.value = lineHeight
    });
};
  // 监听容器大小
  const ro = new ResizeObserver(() => {
    adjustRowHeight();
    init()
  });
onMounted(() => {
    adjustRowHeight();
    tBodyRef.value && ro.observe(tBodyRef.value)
});

let { visibleList, totalHeight, onBodyScroll, init } = useScrollList<OrderItem>(rootEl as Ref<HTMLElement>, anchorEl as Ref<HTMLElement>, {
    itemHeight: internalItemHeight.value,
    fetchPage: props.fetchPage,
    realtimeFactory: props.realtimeFactory,
    realtimeInterval: props.realtimeInterval,
});

onMounted(init);
</script>
<style lang="scss" scoped>
/* ===== 变量 ===== */
$bg: #1e1f22;
$bg-header: #2b2d31;
$bg-row: #282a2e;
$bg-row-hover: #32353b;
$border: #3e4147;
$text: #fafafa;
$text-secondary: #949ba4;
$radius: 6px;
$font-size: 12px;

/* ===== 主容器 ===== */
.order-list-time {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: $bg;
    color: $text;
    font-size: $font-size;
    border-radius: $radius;
    overflow: hidden;
}

/* ===== 表头 ===== */
.table-header {
    display: flex;
    height: 36px;
    align-items: center;
    background: $bg-header;
    border-bottom: 1px solid $border;

    &__cell {
        padding: 0 12px;
        font-weight: 600;
        color: $text-secondary;
    }
}

/* ===== 内容区 ===== */
.table-body {
    flex: 1;
    position: relative;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
        display: none;
    }
}

.virtual-spacer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}

/* ===== 行 ===== */
.order-item {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid $border;
    background: $bg-row;
    transition: background 0.15s;

    &:hover {
        background: $bg-row-hover;
    }

    &__cell {
        padding: 0 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ===== 锚点 ===== */
.anchor {
    position: absolute;
    bottom: 0;
    height: 1px;
    width: 1px;
}
</style>
